<template>
	<view>
		<u-navbar>
			<view style="display: flex;justify-content: center;align-items: center; padding-left: 30rpx;">
				<view class="navtitle">
					订单确认
				</view>
			</view>
		</u-navbar>
		<view class="item">
			<view class="flex">
				日常
			</view>
		</view>
		<view class="item">
			<view class="title">预约信息</view>
			<view>
				上门地址

				徐汇区黎梅花园88栋3单元101

				预约信息

				预约时间

				2024-03-23 10:00

				联系方式

				19256784886
			</view>
		</view>
		<view class="item">
			<view class="title">购买须知</view>
			<view>
				有效期 购买后60天内有效

				预约规则 请按时消费，预约后服务前2小时内可退
			</view>
		</view>
		<view class="foot">
			<view class="bottom">
				<view class="money">
					合作：￥<text class="text">580</text>
				</view>
				<view class="pbtn" @click="goPay()">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		};
	},
	methods:{
		goPay(){
			this.$u.route({
				url: 'pages/housekeeperOrder/pay'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}

.navtitle {
	font-size: 40rpx;
}

.foot {
	height: 150rpx;
	display: flex;
	flex-direction: column;
	background-color: white;
	padding-top: 20rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
}

.item {
	background-color: white;
	width: 100%;
	border-radius: 30rpx;
	padding: 30rpx;

	.title {
		font-size: 40rpx;
	}
}

.bottom {
	display: flex;
	width: 100%;
	margin-top: 20rpx;
	padding: 0 20rpx;
	justify-content: flex-end;
	align-items: center;

	.money {
		float: left;
		position: relative;
		left: -280rpx;
	}

	.pbtn {
		height: 70rpx;
		line-height: 65rpx;
		width: 220rpx;
		padding-top: 0rpx;
		display: inline-block;
		white-space: nowrap;
		border-radius: 26rpx;
		font-size: 26rpx;
		text-align: center;
		color: white;
		background-color: #6c76f4;
		border: 2rpx solid #6c76f4;
	}

	.text {
		font-size: 50rpx;
	}
}
</style>
